<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>亲人生日修改</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style type="text/css">
		body {
			background: #F0F1F2;
		}

		.item-wraper {
			padding: 0 0.15rem;
			background: #ffffff;
		}

		.item-wraper.borderBottom {
			border-bottom: 1px solid #e6e6e6;
		}

		.item-wraper .item {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.item-wraper .item .left {
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(77, 77, 77, 1);
			line-height: 0.21rem;
		}

		.item-wraper .item .right {
			display: flex;
			align-items: center;
		}

		.item-wraper .item .right span {
			color: red;
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			padding: 0.17rem 0;
			margin-right: 0.1rem;
		}

		.item-wraper .item .right input {
			margin-right: 0.1rem;
		}

		.item-wraper .item .right img {
			width: 0.08rem;
			height: 0.12rem;
		}

		input {
			padding: 0.17rem 0;
			text-align: right;
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			line-height: 0.21rem;
		}

		input::-webkit-input-placeholder {
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(179, 179, 179, 1);
			line-height: 0.21rem;
		}

		input::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(179, 179, 179, 1);
			line-height: 0.21rem;
		}

		input:-moz-placeholder {
			/* Mozilla Firefox 4 to 18 */
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(179, 179, 179, 1);
			line-height: 0.21rem;
		}

		input:-ms-input-placeholder {
			/* Internet Explorer 10-11 */
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(179, 179, 179, 1);
			line-height: 0.21rem;
		}

		.add-btn {
			width: 3.45rem;
			height: 0.46rem;
			background: rgba(0, 90, 147, 1);
			border-radius: 0.06rem;
			font-size: 0.13rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.18rem;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0.4rem auto;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="wraper">
			<!-- 生日列表 -->
			<div class="item-wraper">
				<div class="item borderBottom">
					<div class="left">姓名</div>
					<input type="text" placeholder="请填写长辈姓名" v-model="realname" />
				</div>
				<div class="item" @click="sel_date">
					<div class="left">生日</div>
					<div class="right">
					    <input type="text" v-model="birthday" placeholder="请选择长辈出生日期" readonly>
						<!-- <span>	{{birthday==''?'请选择长辈出生日期':birthday}}</span> -->
						<img src="../../image/icons/list-arrow-right.png" alt />
					</div>
				</div>
			</div>

			<!-- end -->
			<!-- 添加按钮 -->
			<div class="add-btn" @click="modifyBirthday">保存</div>

		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			birthdayList: [],
			realname: '',
			birthday: '',
			id:0,
			dataStr:''

		},

		methods: {

			modifyBirthday: function() {
				if (vm.realname == '') {
					toast('姓名不能为空')
					return;
				}
				if (vm.birthday == '') {
					toast('生日不能为空')
					return;
				}
				get_data('api/user/editUserFamily', {
					token: $api.getStorage('token'),
					realname: vm.realname,
					birthday: vm.birthday,
					id:vm.id
				}, function(ret) {
					//AJ(ret)
					toast(ret.msg)
					send_event('my_birthdaytip_change')
					if (ret.status) {
						send_event('my_birthdaytip_change')
						delay_close()
					}
				})
			},

			sel_date: function() {

				if(api.systemType == 'ios'){
					api.openPicker({
						type: 'date',
						title: '选择日期'
					}, function(ret, err) {
						if(ret) {
							var str = ret.year + '-' + ret.month + '-' + ret.day;
							vm.birthday = str;
							get_data('api/user/updateUserInfo', {
								token: $api.getStorage('token'),
								birthday: str
							}, function(ret) {
								if(ret.status) {}
							})
						} else {
							console.log(JSON.stringify(err));
						}
					});
				}else{
					var actionDialog = api.require('UIActionDialog');
					actionDialog.datePicker({
						styles: {
							navigator: {
								h: 55,
								divider: '#696969',
								dividerSize: 0.3,
								titleColor: '#000000',
								title: '出生日期',
								divider: '#EEEEEE',
								bg: '#FFFFFF',
								dividerSize: 0.3,
								titleSize: 17,
							},
							leftBtn: {
								title: '取消',
								bg: '#FFFFFF', //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
								titleSize: 15, //（可选性）数字类型；按钮标题文本字体大小；默认：12
								titleColor: '#999999', //（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
							},
							rightBtn: {
								title: '完成',
								bg: '#FFFFFF', //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
								titleSize: 15, //（可选性）数字类型；按钮标题文本字体大小；默认：12
								titleColor: '#005A93', //（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
							},
							content: { //（可选项）JSON对象；选择器区域样式配置
								h: 257, //（可选项）数字类型；选择器区域的高度（从导航条下分割线到屏幕最底端的高度）；默认：220
								bg: '#FFFFFF', //（可选项）字符串类型；选择器背景，支持rgb、rgba()、#、img；默认：#F5F5F5
								size: 17, //（可选性）数字类型；滚轮显示文字大小；默认：16
								active: '#000000', //（可选项)字符串类型；滑到选中位置后的文本颜色，支持rgb、rgba、#；默认：#ff0000
								inactive: '#00000', //（可选项)字符串类型；滑到非选中位置后的文本颜色，支持rgb、rgba、#；默认：#00000
								divider: '#EEEEEE', // (可选项)字符串类型；选中项上下分隔线的颜色，支持rgb、rgba、#，不传不显示；默认：不显示
								dividerSize: 0.3, // (可选项)数字类型；选中项上下分隔线的粗细；默认：0.5
								row: 5, //（可选项）数字类型；显示几行；默认：5
								fromYears: 1919, //（可选项）数字类型；开始年份；默认：当前年份之前100年
								toYears: 2119 //（可选项）数字类型；终止年份；默认：当前年份之后100年
							}
						},
						mask: 'rgba(0,0,0,0.6)',
						selected: '2019-5-29',
						animation: true
					}, function(ret) {
						console.log(JSON.stringify(ret));
						if (ret.eventType == 'left') {
							actionDialog.close();
						} else if (ret.eventType == 'right') {
							var str = ret.selected;
							vm.birthday = ret.selected;

							actionDialog.close();
						} else if (ret.eventType == 'mask') {
							actionDialog.hide();
						}
					});
				}



			},

			get_info: function() {
				get_data('api/User/birthdayList', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.birthdayList = ret.data.user_family;
					}
				})
			},
			list_detail(){

				vm.realname=vm.dataStr.realname
				vm.birthday=vm.dataStr.birthday
				vm.id=vm.dataStr.id


			}
		}
	})

	apiready = function() {
		vm.dataStr = $api.getStorage('dataStr')
		$api.rmStorage('dataStr')

		// add_event("my_birthday",function(ret){
		// 	vm.dd=ret.data
		// 	vm.realname=ret.data.realname;
		// 	vm.birthday=ret.data.birthday
		// })
		vm.get_info();
		vm.list_detail();
		vm.list_detail()

	};

</script>

</html>
